<div class="row row-sm" >

<div *ngFor="let project of projects; index as i; first as isFirst"

     class="project-item-margin col-xs-6 col-sm-4 col-md-3">
  <div class="item">
    <a (click)="toProjectIndex(project.id)">
      <div class="panel panel-default project-item-height">
        <div class="panel-head-height"      *ngIf="i==0" style="background-image:url(../../../assets/images/svg/panel-head-one.svg)"></div>
        <div class="panel-head-height"      *ngIf="i==1" style="background-image:url(../assets/images/svg/panel-head-two.svg)"></div>
        <div class="panel-head-height"      *ngIf="i==2" style="background-image:url(../assets/images/svg/panel-head-thress.svg)"></div>
        <div class="panel-head-height"      *ngIf="i==3" style="background-image:url(../assets/images/svg/panel-head-four.svg)"></div>
        <div class="panel-head-height"      *ngIf="i==4" style="background-image:url(../assets/images/svg/panel-head-five.svg)"></div>
        <div class="panel-head-height"      *ngIf="i==5" style="background-image:url(../assets/images/svg/panel-head-six.svg)"></div>
        <div class="panel-head-height"      *ngIf="i==6" style="background-image:url(../assets/images/svg/panel-head-seven.svg)"></div>
        <div class="panel-head-height"      *ngIf="i==7" style="background-image:url(../assets/images/svg/panel-head-eight.svg)"></div>
        <div class="panel-head-height"      *ngIf="i==8" style="background-image:url(../assets/images/svg/panel-head-nine.svg)"></div>
        <div class="panel-head-height"      *ngIf="i==9" style="background-image:url(../assets/images/svg/panel-head-one.svg)"></div>
        <div class="panel-head-height"      *ngIf="i==10" style="background-image:url(../assets/images/svg/panel-head-two.svg)"></div>
        <div class="panel-head-height"      *ngIf="i==11" style="background-image:url(../assets/images/svg/panel-head-thress.svg)"></div>

        <div class="panel-body">
          <h3 class="project-item-title">
            {{project.title}}
          </h3>
          <p class="project-item-content">
            {{project.description}}
          </p>
          <div class="panel-footer" >
            <div class="inline project-item-footer-width">
              <i class="icon-like"></i>
              {{project.countThumbsUp}}
            </div>
            <div class="inline project-item-footer-width">
              <i class="icon-eye"></i>
              {{project.countFollow}}
            </div>

          </div>
        </div>
      </div>
    </a>
  </div>
</div>


</div>
